Dentro de las propiedades de los elementos del documento tenemos la propiedad className, que permite modificar la cadena de texto definida en el atributo class del elemento.
Por ejemplo, la expresión mi_elemento.className = 'clase-1' aplica la clase de CSS llamada "clase-1" al elemento seleccionado. Y si a continuación hacemos algo así mi_elemento.className = 'clase-2 clase-3', eliminamos la clase-1 del elemento y le aplicamos al mismo tiempo las clases 2 y 3.
Estos 4 botones ejecutan una función con un parámetro que indica el nombre de clase a aplicar a la ficha naranja de la derecha:
<button onclick="cambiaFicha('arr-izq')">Esquina 1</button>
<button onclick="cambiaFicha('arr-dcha')">Esquina 2</button>
<button onclick="cambiaFicha('abj-izq')">Esquina 3</button>
<button onclick="cambiaFicha('abj-dcha')">Esquina 4</button>
let ficha = document.getElementById('ficha');
function cambiaFicha(clase) {
ficha.className = clase;
}
Este elemento select hace lo mismo, pero aplicando dos clases a la vez a la ficha, usando la propiedad className. Sirve de ejemplo para ver como a partir de más de una clase sobre un mismo elemento la propiedad className ya no es tan práctica
<select name="sel_clase" id="sel_clase" onchange="cambiaClase()">
<option value="arr-izq rojo">Esquina sup iz</option>
<option value="arr-dcha azul">Esquina Sup decha</option>
<option value="abj-izq rojo">Esquina abajo izquierda</option>
<option value="abj-dcha azul">Esquina abajo dcha</option>
</select>
function cambiaClase() {
ficha.className = document.getElementById('sel_clase').value;
}
Esta propiedad, disponible también en los elementos del DOM, permite controlar qué clases tiene el elemento y añadir o eliminar sobre ese conjunto, sin reemplazar todo el contenido.
Para eso utiliza un conjunto de métodos. Los más importantes son add() para añadir, y remove() para eliminar.
Por ejemplo, el código elemento.classList.add('clase-1') añade la clase-1 a las demás clases del elemento, sin eliminarlas, y en caso de que no hubiese ninguna, simplemente añade esta clase. Y el método elemento.classList.remove('clase-2') elimina la clase-2, y deja las demás. Si la clase a eliminar no existe en el elemento no pasa nada, no se produce ningún tipo de error.
Otro método interesante es toggle() que intercambia la clase: añade una clase al elemento cuando no la tiene definida, y la elimina si ya la tiene. Sería algo así elemento.classList.toggle('clase-3').
En este caso se trata de añadir o quitar clases sin que eso afecte al resto de clases ya existentes en el elemento.
function addBordes() {
document.getElementById('muestra').classList.add('bordes');
}
function cambiaFondo() {
document.getElementById('muestra').classList.toggle('sombreado');
}
Este texto recibe o elimina varias clases